import './cabinetList.less'
import VideoItem from '../videoItem/videoItem'
import homeContext from '../../context/homeContext'
import { useContext } from 'react/cjs/react.development'
import config from '../../axios/config'

function CabinetList(props) {
    function getUrl(item) {
        return `${config.wsURL}${item.id}/?url=rtsp://${item.facilityHost}:9554/live&channel=${item.hot ? 1 : 0}&subtype=0`
    }
    const { dispatch } = useContext(homeContext)
    return <div className={`cabinet-list ${props.className}`} >
        {props.list.map(item => <VideoItem className='item'
         onClick={() => dispatch({type: 'setFacility', payload: {facility: item, history: false}})} 
         hisLook={() => dispatch({type: 'setFacility', payload: {facility: item, history: true}})}
         userName={item.serialNumber} url={getUrl(item)} key={item.id}></VideoItem>)}
    </div>
}

export default CabinetList